import {EchartLayer} from "../echartLayer/EchartLayer";

export const PointAttack = class {
  _viewManage = null;
  _chart = null;
  _option = null;
  _pointList = null;
  _point = null;
  _flowDirection = null;

  constructor(viewManage, data) {
    this._viewManage = viewManage;
    this.setOption(data)
  }

  setOption(data){
    let series = formatEchartData(data)
    this._option = {
      tooltip: {
        trigger: "item",
        backgroundColor: "#1540a1",
        borderColor: "#FFFFCC",
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: "z-index:100",
        formatter: function (params, ticket, callback) {
          //根据业务自己拓展要显示的内容
          var res = "";
          var name = params.name;
          var value = params.value[params.seriesIndex + 1];
          res =
            "<span style='color:#fff;'>" +
            name +
            "</span><br/>数据：" +
            value;
          return res;
        }
      },
      visualMap: {
        //图例值控制
        show: false,
        type: 'piecewise',
        pieces: [{
          max: 80,
          color: 'red'
        },
          {
            min: 80,
            max: 120,
            color: 'yellow'
          },
          {
            min: 120,
            color: 'green'
          }
        ],
        calculable: true,
      },
      series
    };
    this._chart = new EchartLayer(this._viewManage, this._option);
  }
  getChart(){
    return this._chart;
  }
}
function formatEchartData(data) {
  let series = [];
  data.forEach(function (item, i) {
    let attackPoint = {
      name:item.from.name,
      value:item.from.coord
    }
    let lineData = null;
    if(item.direction){
       lineData = item.to.map(dataItem=>{
        return [
          item.from,
          dataItem,
        ]
      })
    }else{
       lineData = item.to.map(dataItem=>{
        return [
          dataItem,
          item.from,
        ]
      })
    }
    series.push(
      {
        coordinateSystem: "arcgis",
        type: "lines",
        zlevel: 2,
        effect: {
          show: true,
          // color: "#0bc7f3",
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: "arrow", //箭头图标
          symbolSize: 5 //图标大小
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 0, //尾迹线条透明度
            curveness: 0.3 //尾迹线条曲直度
          }
        },
        data: lineData
      },
      {//涟漪点位特效
        type: "effectScatter",
        coordinateSystem: "arcgis",
        zlevel: 2,
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: "stroke", //波纹绘制方式 stroke, fill
          scale: 4 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: "right", //显示位置
            offset: [5, 0], //偏移设置
            formatter: "{b}" //圆环显示文字
          },
          emphasis: {
            show: true,
            color: "#FF6A6A"
          }
        },
        symbol: "circle",
        symbolSize: function (val) {
          return 8 + val[2] / 1000; //圆环大小
        },
        itemStyle: {
          normal: {
            show: true,
          },
          emphasis: {
            show: true,
            color: "#FF6A6A"
          }
        },
        data: item.to.map(function (dataItem) {
          return {
            name:dataItem.name,
            value:dataItem.coord
          };
        })
      },
      //被攻击点
      {//被攻击点标绘
        type: "scatter",
        coordinateSystem: "arcgis",
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: "stroke",
          scale: 4
        },
        label: {
          normal: {
            show: true,
            color: "red",
            position: "right",
            formatter: "{b}",
          },
          emphasis: {
            show: true,
            color: "#FF6A6A"
          }
        },
        symbol: "pin",
        symbolSize: 30,
        itemStyle: {
          normal: {
            show: true,
            color: "red",
          },
          emphasis: {
            show: true,
            color: "#FF6A6A"
          }
        },
        data: [attackPoint]
      }
    );
  });
  return series;
}
